<template>
    <div class="myorder">
        <div class="head">
            <div class="head_left"><van-icon name="arrow-left" @click="back" /></div>
            <div class="head_mid">
                <div class="head-box">我的订单</div>
            </div>
            <div class="head_right"></div>
        </div>
        <div class="order">
            <div class="order-item" v-for="i in arr.res" @click="go(i.product_id)">
                <div class="order-box">
                    <div class="img"><img :src="i.product_img" alt="" /></div>
                    <div class="content">
                        <div class="product-name">
                            <p>
                                {{ i.product_name }}
                            </p>
                        </div>
                        <div class="product-content">
                            <div class="product-num">x{{ i.product_num }}</div>
                            <div class="product-price"><span>¥</span>{{ i.product_price }}</div>
                        </div>
                    </div>
                </div>
                <div class="person"><span>收货地址:</span>{{ i.user_address }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { getUserOrder } from "../../request/index.js";

// import { getSearch } from "../../request/index.js";
let router = useRouter();
let val = ref("");
let arr = reactive({ res: [] });
let userid = ref("");
let back = () => {
    router.go(-1);
};
userid.value = localStorage.getItem("user_id");
if (userid.value == undefined) {
    console.log("未登入");
} else {
    getUserOrder({ user_id: userid.value }).then((res) => {
        if (res.data.length == 0) {
            return;
        } else {
            arr.res = res.data;
            // console.log(arr.res);
        }
        // console.log(arr.res);
    });
}

let go = (x) => {
    router.push({ path: "/commoditydetails/" + x, query: { id: x } });
};
</script>

<style lang="scss" scoped>
.myorder {
    .head {
        color: #666666;
        box-shadow: 0 0 5px 1px #e5e5e5;
        height: 2.8125rem;
        display: flex;
        .head_left {
            font-size: 1.25rem;
            width: 3.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .head_mid {
            font-size: 1.0625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        .head_right {
            width: 3.25rem;
        }
    }
    .order {
        padding: 0 0.625rem;
        .order-item {
            border-radius: 0.5rem;
            background-color: #f7f7f7;
            margin: 0.9375rem 0;
        }
        .order-box {
            display: flex;
        }
        .person {
            box-sizing: border-box;
            padding: 0.9375rem 0.625rem;
            color: #848484;
            font-size: 0.875rem;
            line-height: 1.25rem;
            span {
                margin-right: 0.625rem;
            }
        }
        .img {
            border-radius: 0.5rem;
            overflow: hidden;
            width: 6.25rem;
            height: 100%;
            background-color: pink;
            img {
                vertical-align: top;
                width: 100%;
                height: 100%;
            }
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0.625rem;
            background-color: #f1f1f1;
            border-radius: 0 0.5rem 0 0;
            .product-name {
                font-size: 0.9375rem;
                word-break: break-all;
                flex: 1;
                color: #848484;
                p {
                    line-height: 1.25rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
            }
            .product-content {
                color: #ff5154;
                display: flex;
                justify-content: space-between;
                .product-price {
                    font-size: 1.25rem;
                    span {
                        font-size: 0.875rem;
                    }
                }
            }
        }
    }
}
</style>
